<script setup lang="ts">
import type { FormInstance } from '@arco-design/web-vue'
import { ConfigApi } from '@/apis'
import { Message } from '@arco-design/web-vue'

const category = 'education'
const loading = ref(false)
const readonly = ref(true)
const config = ref()
const formRef = ref<FormInstance>()

const rules: FormInstance['rules'] = {
  // 'website.title': [{ required: true, match: Regexp.Name, message: '名称只能含有中文、数字、英文、下划线、短横线，长度为2-32位' }],
}

// 查询详情
const getConfig = async () => {
  loading.value = true
  ConfigApi.listMapByCategory(category).then((res) => {
    config.value = res
  }).finally(() => {
    loading.value = false
  })
}

// 编辑
const onEdit = () => {
  readonly.value = false
}

// 取消
const onCancel = async () => {
  readonly.value = true
  getConfig()
  // reset()
}

// 保存
const onSave = async () => {
  await ConfigApi.updateConfigMap(config.value)
  Message.success('修改成功')
  readonly.value = true
  getConfig()
}

onMounted(async () => {
  getConfig()
})
</script>

<template>
  <a-form v-if="config" ref="formRef" layout="vertical" :model="config" :rules :disabled="readonly">
    <a-card :loading class="section" title="签到配置">
      <template #extra>
        <ReadonlyEditButton
          :readonly="readonly"
          :deleteable="false"
          @edit="onEdit"
          @cancel="onCancel"
          @save="onSave"
        />
      </template>
      <a-row :gutter="32">
        <a-col :span="24">
          <a-form-item label="是否限制签到时间" field="'education.signIn.timeLimited'" :span="24">
            <a-switch v-model="config['education.signIn.timeLimited']" checked-value="1" unchecked-value="0" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="签到时间限制（课次开始前）" field="'education.signIn.timeLimitHourBefore'" :span="12">
            <a-input v-model="config['education.signIn.timeLimitHourBefore']">
              <template #prepend>
                课次开始前
              </template>
              <template #append>
                小时允许签到
              </template>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="补签时间限制（课次结束后）" field="'education.signIn.timeLimitNextMonthDayAfter'" :span="12">
            <a-input v-model="config['education.signIn.timeLimitNextMonthDayAfter']">
              <template #prepend>
                课次结束后下个月
              </template>
              <template #append>
                号前允许补签
              </template>
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>
  </a-form>
</template>

<style lang="less" scoped>

</style>
